<template>
	<view class="app background">
		<AppNavbar :bgColor="'transparent'"></AppNavbar>
		<view class="register-content flex-center-center">
			<view class="register-content-flex flex-center-center">


				<Myform :data="state.formdata" :illustrate="state.illustrate" :rules="state.rules" ref="myFormRef">
				</Myform>

				<button class="form-button mybutton" @click="createFun">Create Account1</button>

				<view class="register-illustrate f-size-14 font-weight-600">
					<text>By registering or logging in, you agree to our</text>
					<text class="register-TermsOfUse keynote" @click="gotoAbout(2)">《 Terms of Use》</text>
					and
					<text class="keynote" @click="gotoAbout(3)">《Privacy Policy》</text>
				</view>
			</view>
		</view>

		<up-popup :show="state.show" mode="center" @close="state.show = false" :closeable="true" bgColor="#EDE9E8"
			:customStyle="{'width':'90%'}">
			<view class="popup-title font-weight-600">
				E-Mail verification
			</view> 
			<view class="popup-content px-3">
				<view class="popup-content-text">
					We need to verify that
					<text class="mailbox font-weight-600">{{state.formdata[2].value}}</text>
					is your email account
				</view>
				<view class="popup-content-text ">
					Please enter a six-digit verification code
				</view>
				<up-code-input v-model="state.emailCode" borderColor='#f6f8fa' color="#35CCAF" size="52"
					@finish="codeFinishFun"></up-code-input>
			</view>
			<view class="popup-operate m-auto t-center">
				<button class="popup-operate-btn mybutton" @click="registerFun" :disabled="!state.copyEmailCode">Sign
					Up</button>
				<text @click="Resend">Resend</text>
			</view>
		</up-popup>
		<up-modal :show="state.modalshow" title="Sign Up failed" content='Verification code error'
			contentTextAlign="center" confirmText="OK" @confirm="state.modalshow = false"></up-modal>
	</view>
</template>

<script setup>
	import Myform from '@/components/Myform/Myform.vue'
	import {
		getEmailCodeApi
	} from '@/api/common.js'
	import {
		registerApi
	} from '@/api/account.js'
	const myFormRef = ref(null)
	const state = reactive({
		show: false,
		modalshow: false,
		emailCode: '',
		copyEmailCode: '',
		illustrate: "Send me the latest product updates by emai",
		formdata: [{
				prop: 'firstName',
				label: 'First Name',
				value: '',
				line: true
			},
			{
				prop: 'lastName',
				label: 'Last Name',
				value: '',
				line: true
			},
			{
				prop: 'userPhone',
				label: 'E-Mail',
				value: '',
				line: true
			},
			{
				prop: 'userPaw',
				label: 'Password',
				value: '',
				type: 'private',
				line: true
			}
		],
		rules: {
			firstName: {
				type: 'string',
				required: true,
				message: 'Please fill in your first name',
				trigger: ['blur', 'change']
			},
			lastName: {
				type: 'string',
				required: true,
				message: 'Please fill in your last name',
				trigger: ['blur', 'change']
			},
			userPhone: 'email',
			userPaw: 'password',

		}
	})
	const sendCode = async () => {
		console.log(11);
		const res = await myFormRef.value.verify()
		if (!res) {
			return
		}
		console.log(state,'state')

		const {
			code,
			data: emailCode
		} = await getEmailCodeApi({
			email: res.userPhone
		})
		if (code === 200) {
			state.copyEmailCode = emailCode
			console.log(emailCode);
		}
		// // state.copyEmailCode = '123456'
		state.show = true
	}

	const Resend = () => {

	}

	//发送验证码
	const createFun = async () => {

		if (!myFormRef.value.getaloneChecked()) {
			uni.tools.showTips('请先勾选')
			return
		}

		sendCode()
	}
	//验证码输入完成
	const codeFinishFun = (e) => {
		// console.log(e);
		if (e !== state.copyEmailCode) {
			uni.tools.showTips('The verification code is incorrect')
		}
		//  else {
		// 	state.copyEmailCode = true
		// }
	}
	//创建账号
	const registerFun = async () => {
		const postData = await myFormRef.value.verify()
		const res = await registerApi({
			...postData,
			code: state.copyEmailCode
		})
		if (res.code === 200) {
			uni.tools.showTips('register success')
			state.show = false
			uni.$to('/pages/MyPet/AddDevice')
		} else {
			state.show = false
			uni.tools.showTips(res.msg)
		}
	}

	const gotoAbout = (type) => {
		uni.$to('/pages/About/About?type=' + type)
	}
</script>

<style lang="scss" scoped>
	.app {
		.register-content {
			width: 100%;
			position: fixed;
			bottom: 50rpx;

			.register-content-flex {
				width: 95%;

				.mybutton {
					background: $uni-bg-linear;
					color: $uni-bg-color;
					margin: 45rpx 0;
				}

				.register-illustrate {
					width: 85%;
					text-align: center;
					color: $uni-bg-color;

					.keynote {
						color: $uni-cyan;
					}
				}
			}
		}

		.popup-title {
			text-align: center;
			padding-top: 60rpx;
			color: #0D77C2;
		}

		.popup-content {
			word-break: break-all;
			margin-top: 20rpx;

			.popup-content-text {
				margin: 0rpx 15rpx;
				margin-bottom: 10rpx;
				font-size: 30rpx;

				.mailbox {
					color: #0D77C2;
				}
			}

			margin-bottom: 40rpx;
		}

		.popup-operate {
			width: 90%;

			.popup-operate-btn {
				background: $uni-bg-linear;
				border-radius: 0;
				color: $uni-bg-color;
				box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2);
			}

			text {
				display: inline-block;
				color: #46A0F9;
				margin: 30rpx 0;
			}
		}
	}


	::v-deep .u-code-input__item {
		background-color: #f6f8fa;

		uni-text {
			color: black !important;
		}
	}

	::v-deep .u-form-item__body__right__message {
		margin-left: 15px !important;
	}
</style>